<template>
    <div class="fatherBox1">
        <div class="headerBox">
            <div class="left">
                <img :src="routeLogo1" alt=""></img>
                <span>{{propData.skipData.name}}</span>
            </div>
            <div class="right">
                <el-icon :size="18" @click="close" style="cursor:pointer;">
                    <CloseBold />
                </el-icon>
            </div>
        </div>
        <div class="pointList">
            <div class="top">
                <span class="label">
                    点位组
                </span>
                <span class="label">
                    状态
                </span>
                <span class="label">
                    完成时间
                </span>
            </div>
            <div class="list">
          <div v-for="(item, index) in pointList" :key="index" class="row">
            <span class="label">{{ item.name }}</span>
            <span class="label" :style="{color: item.status == '1' ? '#4DEE8E' :  item.status == '2' ? '#FF9262 ' : item.status == '3' ? '#FF2D2D' : '#fff'}">{{ item.status == '1' ? '已完成' :  item.status == '2' ? '待巡检' : item.status == '3' ? '未巡检' : ''}}</span>
            <span class="label" >{{item.status == '1' ? item.time : '暂无'}}</span>
          </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import routeLogo1 from '@/assets/images/patrolRoute/routeLogo1.png'
import { inject, onMounted, ref } from 'vue';
const isShowInfo:any = inject('isShowInfo')
const propData:any = defineProps(['skipData'])
// 1 已巡检 2 待巡检 3 未巡检 
const pointList = ref(
    [{
        name: '4号宿舍楼',
        maplat: '525',
        maplon: '490',
        status: '1',
        time: '09:12:25',
        isSelected: false,
        sort: '1'
    }, {
        name: '3号宿舍楼',
        maplat: '660',
        maplon: '490',
        status: '1',
        time: '09:12:25',
        isSelected: false,
        sort: '2'
    }, {
        name: '2号宿舍楼',
        maplat: '790',
        maplon: '490',
        status: '2',
        time: '09:12:25',
        isSelected: false,
        sort: '3'
    }, {
        name: '1号宿舍楼',
        maplat: '930',
        maplon: '490',
        status: '3',
        time: '09:12:25',
        isSelected: false,
        sort: '4'
    }, {
        name: '食堂',
        maplat: '1090',
        maplon: '510',
        status: '3',
        time: '09:12:25',
        isSelected: true,
        sort: '5'
    }, {
        name: '体育馆',
        maplat: '960',
        maplon: '170',
        status: '3',
        time: '09:12:25',
        isSelected: false,
        sort: '6'
    }, {
        name: '400米标准田径运动场',
        maplat: '600',
        maplon: '290',
        status: '3',
        time: '09:12:25',
        isSelected: false,
        sort: '7'
    }]
)

// 关闭
const close = () => {
    isShowInfo.value = '0'
}
onMounted(() => {
    console.log("页面加载完成");
})
</script>

<style lang="scss" scoped>
.fatherBox1 {
    width: 329px;
    margin-top: 10px;
    height: calc(100% - 82px);
    box-sizing: border-box;
    background: rgb(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 13px 0;
    display: flex;
    flex-direction: column;
    color: #FEFEFE;

    .headerBox {
        padding: 0 19px 20px 19px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;

            img {
                width: 24px;
                height: 24px;
                margin-right: 5px;
            }
        }
    }


    .pointList {
        .top {
            display: flex;
            background-color: rgb(69, 159, 255, 0.5);
            height: 40px;
            justify-content: center;
            align-items: center;

            .label {
                font-weight: bold;
                font-size: 14px;
                color: #FFFFFF;
                width: 33.3%;
                text-align: center;
            }
        }
        .list {
            display: flex;
            flex-direction: column;
            .row {
            height: 40px;

                display: flex;
                justify-content: space-between;
                align-items: center;
                .label {
                    width: 33.3%;
                      font-size: 14px;
                color: #FFFFFF;
                text-align: center;

                }
            }
        }
       
    }
}
</style>